<template>
  <div v-loading="loading">
    <el-steps :active="activeIndex" align-center>
      <el-step title="步骤一" description="引用模板" />
      <el-step title="步骤二" description="基本信息" />
      <el-step title="步骤三" description="信息确认" />
    </el-steps>
    <!-- <StepTabs :tabs="tabsList" v-model="activeIndex"></StepTabs> -->
     <!-- 任务内容 -->
     <template v-if="activeIndex==1">
        <TaskContent :nowRowData="formData" ref="taskContent"></TaskContent>
    </template>
    <!-- 任务信息 -->
    <template v-if="activeIndex==2">
      <EditPart ref="editForm" :nowRowData="formData" @onSubmit="onSubmit"></EditPart>
    </template>
    <!-- 信息预览 -->
    <template v-if="activeIndex==3">
      <TaskInfo ref="taskInfo" :nowRowData="formData" ></TaskInfo>
    </template>
    <!-- 上下步按钮 -->
    <div class="btn_part">
      <el-button type="" v-if="activeIndex!=1" @click="pre">上一步</el-button>
      <el-button type="" v-if="activeIndex!=3" @click="next">下一步</el-button>
      <el-button type="" v-if="activeIndex==3" @click="save()">保存 暂不发布</el-button>
      <!-- <el-button type="primary" v-if="activeIndex==3" @click="save('dispatch')">确认 并发布</el-button> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'
import StepTabs from '@/views/instOperate/components/StepTabs/index.vue'
import TaskContent from './taskContent/index.vue'
import EditPart from '@/views/governmentAffairs/overallTask/editPart/index.vue'
import TaskInfo from '@/views/governmentAffairs/overallTask/detailPart/bottomTabs/taskInfo.vue'
import apiMod from '@/apiMod/index'
import { cloneDeep } from 'lodash-es'

let emits = defineEmits(['refresh'])

let loading = ref(false)
let taskContent = ref()
let activeIndex = ref(1)

let editForm = ref()
let taskInfo = ref()

let formData = ref({})
let activeType = 'next'
const next = () =>{
  activeType = 'next'
  if(activeIndex.value==1){
    // 如果是步骤一,需要表格有值
    let taskContentData = taskContent.value.submit()
    let copyData = cloneDeep(taskContentData.metadataJson)
    copyData = JSON.parse(copyData)
    // 表头不能有空的值
   let headKeyList = Object.values(copyData.head)
   let headKeyListEmpty = headKeyList.every(Boolean)
   if(!headKeyListEmpty){
      ElMessage.warning('不能有空的统计名称')
      return
   }
   //目标值不能有空的
   let dataKeyList= []
   if(copyData.data&&copyData.data.length>0){
    dataKeyList = Object.keys(copyData.data[0])
   }else{
    ElMessage.warning('请添加至少一个接收人')
    return
   }
   let targetValEmpty = dataKeyList.every(item=>{
      if(item.includes('_1')){
        if(copyData.data[0][item]||copyData.data[0][item]===0){
          return true
        }else{
          return false
        }
      }else{
        return true
      }
    })
   if(!targetValEmpty){
      ElMessage.warning('目标值必须填写')
      return
   }
   if(copyData.data.length==0){
      //没有接收人
      ElMessage.warning('请添加至少一个接收人')
    }else if(!copyData.head['th2']){
      //没有统计名称
      ElMessage.warning('请填写至少一个统计名称')
    }else{
      formData.value = {...formData.value,...taskContentData}
      activeIndex.value = activeIndex.value + 1
    }
    
  }else if(activeIndex.value==2){
     // 如果是步骤二
    editForm.value.submit()
  }
    
}
const pre = () =>{
  activeType = 'pre'
  // 如果是步骤二
  if(activeIndex.value==1){
    editForm.value.submit()
  }else{
    activeIndex.value = activeIndex.value - 1
  }
  
}
const save = (type="save") =>{
  loading.value = true
  // 提交
  let params = {
    ...formData.value,
    filterData:undefined,
    nameList:undefined,
    publishStatus:type=="save"?"UNPUBLISHED":"PUBLISHED",
    publishStatusLabel:type=="save"?"未发布":"已发布",
    taskStatus: type=="save"?"CREATED":"UNFILLED",
    taskStatusLabel: type=="save"?"已创建":"未填报"
  }

  apiMod.view_zwglTaskInfo_add(params).then(res=>{
    ElMessage.success('提交成功')
    emits("refresh")
    loading.value = false
  }).catch(err=>{
    loading.value = false
  })
}

const onSubmit = (form) =>{
  formData.value = {...formData.value,...form}
  if(activeType=='next'){
    activeIndex.value = activeIndex.value + 1
  }else{
    activeIndex.value = activeIndex.value - 1
  }
  
}
</script>
<style scoped lang="scss">
.btn_part{
  margin:10px auto;
  width: 20%;
  display:flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
</style>